<template>
  <div class="searchCity">
    <div class="search">
      <input
        type="text"
        v-model="keywords"
        class="searchIpt"
        placeholder="请输入想去的地方，比如：'广州'"
        @keyup.enter="$router.push(`/post?city=${keywords}`)"
      />
      <!--优化：@keyup.enter onsearch子传父方法  改为父组件监听路由的城市参数变化 渲染相应数据-->
      <i class="el-icon-search" @click="$router.push(`/post?city=${keywords}`)"></i>
    </div>
    <div class="recommend">
      <span>推荐：</span>
      <nuxt-link
        :to="`/post?city=${item}`"
        v-for="(item,index) in recommendCities"
        :key="index"
      >{{item}}</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendCities: ["广州", "上海", "北京"],
      keywords: '',
    }
  },
  watch: {
    $route() {
      if (this.$route.query.city) {
        this.keywords = this.$route.query.city
      }
      if (!this.$route.query.city) {
        this.keywords = ''
      }
    }
  },
  mounted() {
    if (this.$route.query.city) {
      this.keywords = this.$route.query.city
    }
  }
}
</script>

<style lang="less" scoped>
.searchCity {
  .search {
    position: relative;
    margin-bottom: 10px;
    .searchIpt {
      width: 100%;
      height: 40px;
      border: 3px solid #ffa500;
      outline: none;
      padding: 0 48px 0 20px;
      box-sizing: border-box;
    }
    i {
      position: absolute;
      right: 15px;
      top: 50%;
      font-size: 20px;
      color: #ffa500;
      cursor: pointer;
      transform: translate(0, -50%);
      font-weight: 700;
    }
  }
  .recommend {
    font-size: 12px;
    color: #666;
    a {
      cursor: pointer;
      color: #666;
      text-decoration: none;
      margin: 0 3px;
      &:hover {
        color: #ffa500;
        text-decoration: underline;
      }
    }
  }
}
</style>